<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Mircore 请求测试页面</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<style>
	ul, li {
		margin: 0px;
		padding: 0px;
	}
	.box-wrapper {
		width: 95%;
	}
	.wrapper {
		display: inline-block;
		width:49%;
		vertical-align: top;
	}
	input {
		width:300px;
	}
	.box{
		border:1px solid #333333;
		margin-bottom: 20px;
	}
	.box ul li{
		display: inline-block;
		padding:7px;
	}
	.box ul:nth-child(2n-1) {
		background: #CCCCCC;
	}
	.base-box ul li:first-child {
		width:200px;
		margin-right:30px;
	}
	.query-box {
		position: relative;
	}
	.query-box li:first-child {
		width: 380px;
	}
	.add-line {
		position: absolute;
		right: 0px;
		top: 10px;
		width: 20px;
		cursor: pointer;
	}
	.query-val-box ul {
		border-top: 1px solid #777777;
	}
</style>
</head>
<body>
	<div class="wrapper">
		<h3>基本配置</h3>
		<div class="box base-box box-wrapper">
			<ul><li>请求方式：</li><li>
				<select id="request_method">
					<option>GET</option>
					<option>POST</option>
					<option>PUT</option>
					<option>DELETE</option>
				</select>
			</li></ul>
			<ul><li>请求地址：</li><li><input type="text" id="request_url" /></li></ul>
		</div>
		<div class="query-box box-wrapper">
			<h3>请求参数</h3><div class="add-line" id="add_line">+</div>
			<div class="box">
				<ul><li>参数名称</li><li>参数值</li></ul>
				<div class="query-val-box" id="query_config_box"></div>
			</div>
		</div>
		<button id="submit_btn">发送请求</button>
	</div>
	<div class="wrapper">
		<h3>请求内容</h3>
		<div class="box base-box box-wrapper">
			<ul><li>请求方法</li><li id="request_method_response"></li></ul>
			<ul><li>请求URL</li><li id="request_url_response"></li></ul>
			<ul><li>请求参数</li><li id="request_params_response"></li></ul>
		</div>
	</div>
	<div>
		<form id="form-news-edit">
			<textarea name="content" style="width: 600px; height: 400px;"></textarea>
		</form>
		<button id="submitData">提交</button>
	</div>
<script>

$("#submitData").on('click', function () {

	var formData = new FormData(document.getElementById("form-news-edit"));
	console.log(formData);

	$.ajax(
		{
            url: "/method/postForm",
            type: 'post',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(result) {
                $.operate.successCallback(result);
            }
        }
	);
});

var createQueryConfig = (function() {

	var index = 0;
	var querConfigBox =$("#query_config_box");

	return function() {

		var node = $(`<ul><li><input type="text" id="name_${index}" class="names" /></li>
					<li><input type='text' id="value_${index}" class="values" /></li></ul>`);
		index++;
		querConfigBox.append(node);

	};
})();

createQueryConfig();

$("#add_line").on('click', createQueryConfig);

$("#submit_btn").on('click', (function() {

	var requestMethod = $("#request_method_response");
	var requestUrl = $("#request_url_response");
	var requestParams = $("#request_params_response");

	return function() {

		try {
			var names = $(".names");
			var values = $(".values");
			var method = $("#request_method").val();
			var url = $("#request_url").val();

			var data = {};

			for (var i = 0, len = names.length; i < len; i++) {
				var name = $(names[i]).val();
				var value = $(values[i]).val();

				if (name) {
					data[name] = value;
				}
			}

			var res = $.ajax({
				url: '/method/testreq/' + url,
				method: method,
				data: data,
				success: function(res) {
					requestMethod.html(res.requestMethod);
					requestUrl.html(res.requestUrl);
					requestParams.html(res.requestParams);
				}
			});

		} catch (e) {
			alert(e.message);
			console.log(e.stack);
		}
	}
})());

</script>
</body>
</html>